<template>
  <el-dialog v-model="showDialog" title="编辑规格" width="800px" :close-on-click-modal="false" @opened="handleOpened"
    @closed="handleClosed">
    <el-form ref="formRef" :model="form" :label-width="120">
      <slot name="form-item" :form="form" :product-row-data="productRowData">
        <product-name v-model:model-value="form.name"></product-name>
        <product-thumbnail-url v-model:model-value="form.thumbnailUrl"></product-thumbnail-url>
        <product-stock :value="form.stock"></product-stock>
        <product-total-stock :value="form.totalStock"></product-total-stock>
        <product-before-stock :value="form.beforeStock"></product-before-stock>
        <product-original-price-readonly label-str="供货价" :value="productRowData.costPrice" />
        <product-sale-price v-model:model-value1="form.payOfCurrencyCount"
          v-model:model-value2="form.payPrice"></product-sale-price>
        <product-add-or-deduction-stock-count v-model:model-value="form.addOrDeductionStockCount_fe"
          v-model:symbol="form.addOrDeductionStockCountSymbol_fe"
          :product-row-data="productRowData"></product-add-or-deduction-stock-count>
      </slot>
      <slot name="form-item-append" :form="form"></slot>
    </el-form>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button @click="handleConfirm" type="primary">确定</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { IGoodsPageRow, IStoreProductRow } from "@/api/modules/pointsMall";
import ProductName from "@/components/goodsCenter/addProductFormItem/ProductName.vue";
import ProductThumbnailUrl from "@/components/goodsCenter/addProductFormItem/ProductThumbnailUrl.vue";
import ProductAddOrDeductionStockCount from "@/components/goodsCenter/addProductFormItem/ProductAddOrDeductionStockCount.vue";
import ProductTotalStock from "@/components/goodsCenter/addProductFormItem/ProductTotalStock.vue";
import ProductStock from "@/components/goodsCenter/addProductFormItem/ProductStock.vue";
import ProductBeforeStock from "@/components/goodsCenter/addProductFormItem/ProductBeforeStock.vue";
import { useEditProduct } from "@/components/goodsCenter/compositions/useEditProduct";
import { IEditProductForm } from "@/components/goodsCenter/types/editProductForm";
import ProductSalePrice from "@/components/goodsCenter/addProductFormItem/ProductSalePrice.vue";

const props = withDefaults(
  defineProps<{
    show: boolean;
    formProps: string[]; // 标识form中的item项都有哪些，会影响初始化时的格式化，提交时的格式化
    submitUrl: string; // 提交时的API地址
    rowData: IGoodsPageRow; // 商品行数据
    productRowData: IStoreProductRow; // 规格行数据
  }>(),
  {
    show: false,
    formProps: () => [],
    submitUrl: "",
  }
);
const emits = defineEmits(["update:show", "confirm", "cancel", "confirm"]);
const showDialog = computed({
  get() {
    return props.show;
  },
  set(val) {
    return emits("update:show", val);
  },
});

const { form, formRef, getForm, submit } = useEditProduct();


//添加供货价
if (props.productRowData?.costPrice) {
  form.costPrice = props.productRowData.costPrice
}
const handleConfirm = () => {
  submit(props.submitUrl, form).then(() => {
    showDialog.value = false;
    emits("confirm");
  });
};

const handleCancel = () => {
  showDialog.value = false;
};

const handleOpened = () => {

  getForm(props.productRowData);
};

const handleClosed = () => {
  formRef.value?.resetFields();
};
</script>

<style scoped lang="scss"></style>
